<template>
    <div>
        <div id="myChart" ref="myChart" :style="{width: '698px', height: '345px'}"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'echartsLine',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(this.$refs.myChart)
        // 绘制图表
        myChart.setOption({
            // tooltip: {
            //     trigger: 'axis'
            // },
            legend: {
                data: ['cpu利用率峰值', 'cpu利用率均值'],
                // icon: "circle",//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
                itemWidth: 14,  // 设置宽度
                itemHeight: 10, // 设置高度
                itemGap: 16, // 设置间距
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },

            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['18号','19号','20号','21号','22号','23号',],
                axisLine: {
                    lineStyle: {
                        width:1,
                        color: '#e9ecf0',
                    
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#878E9D',
                        fontSize:'12',    
                    }
                },
            },
            yAxis: {
                type:'value',
                min:0,
                max:100,
                axisLabel: {
                    inside: false,
                    formatter: "{value} %",
                    textStyle: {
                        color: '#878E9D',
                        fontSize:'12',    
                    }
                },
                axisLine: {
                    show:false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: true,
                    lineStyle:{
                        color: '#F7F8FA',
                        width: 1,
                        // type: 'dashed'
                    }
            　　},
            },
            series: [
                {
                    name: 'cpu利用率峰值',
                    type: 'line',
                    symbol:'circle', 
                    // symbolSize: 1, 
                    // stack: 'Total',
                    data: [{value:10,label:{
                            show:true
                        }},
                        {value:30,label:{
                            show:true
                        }},
                        {value:47,label:{
                            show:true
                        }},
                        {value:32,label:{
                            show:true
                        }},
                        {value:1,label:{
                            show:true
                        }},
                        {value:97,label:{
                            show:true
                        }},
                        {value:85,label:{
                            show:true
                        }},],
                    itemStyle: {
                        normal: {
                            borderColor: '#3171ee',
                            borderWidth: 1,
                            color:'#3171ee'
                        },     
                    },
                    lineStyle: {
                        color: "#3171ee",//折线的颜色,
                        width:2,
                    },
                },
                {
                    name: 'cpu利用率均值',
                    type: 'line',
                    symbol:'circle', 
                    // symbolSize: 1, 
                    // stack: 'Total',
                    data: [
                        {value:90,label:{
                            show:true
                        }},
                        {value:60,label:{
                            show:true
                        }},
                        {value:30,label:{
                            show:true
                        }},
                        {value:40,label:{
                            show:true
                        }},
                        {value:80,label:{
                            show:true
                        }},
                        {value:45,label:{
                            show:true
                        }},
                        {value:16,label:{
                            show:true
                        }},
                        ],
                    itemStyle: {
                        normal: {
                            borderColor: '#DF822D',
                            borderWidth: 1,
                            color:'#DF822D'
                        },     
                    },
                    lineStyle: {
                        color: "#DF822D",//折线的颜色,
                        width:2,
                    },
                }
            ]
        });
    }
  }
}
</script>

<style lang="scss" scoped>

</style>